{% extends 'layouts/default/page.html' %}
{% load static %}
{% load i18n %}

{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Video Player</title>
    <style>
        .video-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            margin: 20px;
        }
        video {
            width: 600px;
            height: 400px;
            object-fit: contain;
            background-color: black;
        }
    </style>
</head>
<body>

    {% if user.is_authenticated %}
        <div class="video-grid">
            <!-- Video Player 1 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video1')">
                <video id="video1" controls src="{% static 'a.mp4' %}" type="video/mp4"></video>
            </div>
            <!-- Video Player 2 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video2')">
                <video id="video2" controls></video>
            </div>
            <!-- Video Player 3 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video3')">
                <video id="video3" controls></video>
            </div>
            <!-- Video Player 4 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video4')">
                <video id="video4" controls></video>
            </div>
            <!-- Video Player 5 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video5')">
                <video id="video5" controls></video>
            </div>
            <!-- Video Player 6 -->
            <div>
                <input type="file" accept="video/*" onchange="loadVideo(event, 'video6')">
                <video id="video6" controls></video>
            </div>
        </div>

        <script>
            function loadVideo(event, videoId) {
                const video = document.getElementById(videoId);
                const file = event.target.files[0];
                const url = URL.createObjectURL(file);
                video.src = url;
            }
        </script>
    {% else %}
        <div class="alert alert-warning">
            您还未登录。
        </div>
    {% endif %}

</body>
</html>
{% endblock %}
